<template>
  <f7-page
    :name="name"
    @page:init="pageInit"
    @page:beforeremove="pageBeforeRemove"
    @page:afterin="onPageAfterIn"
    @page:beforeout="onPageBeforeOut"
  >
    <f7-subnavbar>
      <f7-segmented class="toolbar tabbar toolbar-top">
        <div class="toolbar-inner">
          <f7-link tab-link="#practice">实践</f7-link>
          <f7-link tab-link="#assessment">评估</f7-link>
        </div>
      </f7-segmented>
    </f7-subnavbar>

    <div class="fab fab-right-bottom" @click="tipAddPage">
      <a>
        <i class="icon f7-icons">add</i>
      </a>
    </div>

    <!-- Page content-->
    <f7-tabs swipeable>
      <f7-page-content
        id="practice"
        class="page-content-tab"
        tab
        tab-active
        infinite
        :infinite-distance="50"
        :infinite-preloader="nonstopPreloader"
        @infinite="onInfiniteScroll_nonstop"
        @tab:show="tabActive('practice')"
      >
        <div class="list form-list">
          <ul>
            <li v-for="el in nonstoplist" :key="'nonstoplist_'+el.id" @click="tipDetail(el)">
              <a href="#" class="item-link item-content">
                <div class="item-media">
                  <img
                    class="item-media-img"
                    :src="el.headimg_url ? el.headimg_url : portraitLogo"
                    alt="头像"
                  />
                </div>
                <div class="item-inner">
                  <div class="item-title">
                    <div class="item-header"></div>
                    {{el.title}}
                    <div
                      class="item-footer"
                    >{{el.create_time ? el.create_time.substring(0,10) : ''}}</div>
                  </div>
                  <div class="item-after"></div>
                </div>
              </a>
            </li>
          </ul>
        </div>
        <div class="data-null" v-if="nonstoplist.length == 0">暂无实践数据</div>
      </f7-page-content>
      <f7-page-content
        id="assessment"
        class="page-content-tab"
        tab
        infinite
        :infinite-distance="50"
        :infinite-preloader="lawPreloader"
        @infinite="onInfiniteScroll_law"
        @tab:show="tabActive('assessment')"
      >
        <div class="list form-list">
          <ul>
            <li v-for="el in lawlist" :key="'lawlist_'+el.id" @click="tipDetail(el)">
              <a href="#" class="item-link item-content">
                <div class="item-media">
                  <img
                    class="item-media-img"
                    :src="el.headimg_url ? el.headimg_url : portraitLogo"
                    alt="头像"
                  />
                </div>
                <div class="item-inner">
                  <div class="item-title">
                    <div class="item-header"></div>
                    {{el.title}}
                    <div
                      class="item-footer"
                    >{{el.create_time ? el.create_time.substring(0,10) : ''}}</div>
                  </div>
                  <div class="item-after"></div>
                </div>
              </a>
            </li>
          </ul>
        </div>
        <div class="data-null" v-if="lawlist.length == 0">暂无评估数据</div>
      </f7-page-content>
    </f7-tabs>
  </f7-page>
</template>

<script>
import Storage from "../../mod/storage";
import StringUtils from "../../js/mod.string";
import ListNull from "../components/null-list.vue";
import Log from "../../mod/log.js";
import strings from "../../assets/strings";
import cordova from "../../js/cordova-app";
import Utils from "../../js/mod.utils";
import String from "../../js/mod.string";
import Http from "../../js/mod.http";
import ConstantUtils from "../../js/vue.constant";

import ToastUtils from "../../mod/utils.toast";

const name = strings.page.land.list;
const log = new Log(name);

export default {
  components: {
    ListNull,
  },
  data() {
    return {
      preloader: true,
      loading: true,
      curPage: 1,
      totalPage: 0,
      size: 15,
      listArr: [],
      portraitLogo: "./static/images/logo.png",
      name: name,

      type: "practice", // 'practice','assessment'

      // 实践
      nonstoppage: 1,
      nonstoptotal: 0,
      nonstoplist: [],
      // 评估
      lawpage: 1,
      lawtotal: 0,
      lawlist: [],

      nonstopPreloader: true,
      lawPreloader: true,
    };
  },
  methods: {
    pageInit(event, pageData) {
      let _this = this;
      _this.updateNonstopListDate();
      _this.updateLawListDate();
      Utils.bindEvent(
        _this,
        Utils.kEvents.updateStoryList,
        _this.updateListDate
      );
    },
    pageBeforeRemove() {
      log.w("pageBeforeRemove");
      let _this = this;
      Utils.unbindEvent(
        _this,
        Utils.kEvents.updateStoryList,
        _this.updateListDate
      );
    },
    onPageAfterIn() {
      let _this = this;
      Utils.setTitle(_this, "我的故事");
      Utils.setBack(_this, function (e) {
        _this.onBack();
      });
    },
    onPageBeforeOut() {
      let _this = this;
    },
    tipAddPage() {
      let _this = this;
      let data = {
        type: _this.type,
      };
      Utils.load(_this, "/story-add/", data, {});
    },
    tipDetail(item) {
      let _this = this;
      let data = {
        id: item.id,
      };
      Utils.load(_this, "/story-detail/", data, {});
    },
    updateListDate(_data) {
      let _this = this;
      _this.updateNonstopListDate();
      _this.updateLawListDate();
    },
    tabActive: function (type) {
      let _this = this;
      _this.type = type;
      if (type == "practice") {
        _this.updateNonstopListDate();
      } else if (type == "assessment") {
        _this.updateLawListDate();
      }
    },
    // 实践
    updateNonstopListDate: function () {
      let _this = this;
      _this.nonstoppage = 1;
      _this.getNonstopListDate();
    },
    getNonstopListDate: function () {
      let _this = this;
      if (_this.nonstoppage == 1) {
        _this.nonstoplist = [];
      }
      var data = {
        page: _this.nonstoppage,
        size: _this.size,
        openid: _this.$f7.data.openid,
        type: "practice",
      };
      let params = {
        url: Http.kInterfacePath.story.list,
        data: data,
        type: Http.httpType.post,
        success: _successFun,
      };
      Http.ajax(_this, params);
      function _successFun(res) {
        if (res.result == 0) {
          var list = res.data || [];
          _this.nonstoplist.push(...list);
          _this.nonstoptotal = res.rows || 0;
          if (res.page * res.size >= res.rows) {
            _this.nonstopPreloader = false;
          } else {
            _this.nonstopPreloader = true;
          }
        } else {
          ToastUtils.toast.show(
            ToastUtils.param.toast({ text: strings.toast["list-error"] })
          );
        }
      }
    },
    onInfiniteScroll_nonstop: function () {
      let _this = this;
      if (!_this.loading) {
        return;
      }
      _this.loading = false;
      setTimeout(function () {
        if (_this.nonstoppage * _this.size >= _this.nonstoptotal) {
          _this.nonstopPreloader = false;
          ToastUtils.toast.show(
            ToastUtils.param.toast({ text: strings.toast["displayed-all"] })
          );
          return;
        }
        _this.nonstoppage = _this.nonstoppage + 1;
        _this.getNonstopListDate();
        _this.loading = true;
      }, 1000);
    },
    // 评估
    updateLawListDate: function () {
      let _this = this;
      _this.lawpage = 1;
      _this.getLawListDate();
    },
    getLawListDate: function () {
      let _this = this;
      if (_this.lawpage == 1) {
        _this.lawlist = [];
      }
      var data = {
        page: _this.lawpage,
        size: _this.size,
        openid: _this.$f7.data.openid,
        type: "assessment",
      };
      let params = {
        url: Http.kInterfacePath.story.list,
        data: data,
        type: Http.httpType.post,
        success: _successFun,
      };
      Http.ajax(_this, params);
      function _successFun(res) {
        if (res.result == 0) {
          var list = res.data || [];
          _this.lawlist.push(...list);
          _this.lawtotal = res.rows || 0;
          if (res.page * res.size >= res.rows) {
            _this.lawPreloader = false;
          } else {
            _this.lawPreloader = true;
          }
        } else {
          ToastUtils.toast.show(
            ToastUtils.param.toast({ text: strings.toast["list-error"] })
          );
        }
      }
    },
    onInfiniteScroll_law: function () {
      let _this = this;
      if (!_this.loading) {
        return;
      }
      _this.loading = false;
      setTimeout(function () {
        if (_this.lawpage * _this.size >= _this.lawtotal) {
          _this.lawPreloader = false;
          ToastUtils.toast.show(
            ToastUtils.param.toast({ text: strings.toast["displayed-all"] })
          );
          return;
        }
        _this.lawpage = _this.lawpage + 1;
        _this.getLawListDate();
        _this.loading = true;
      }, 1000);
    },

    onBack() {
      let _this = this;
      _this.$f7router.back();
    },
    onResume() {
      log.w("onResume");
    },
    onPause() {
      log.w("onPause");
    },
  },
};
</script>

<style scoped>
</style>
